<template>
  <view class="privacy-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="title">用户隐私协议</text>
      <text class="update-time">最后更新：{{ updateTime }}</text>
    </view>

    <!-- 协议内容区域 -->
    <scroll-view class="content-scroll" scroll-y="true">
      <view class="content">
        <!-- 引言部分 -->
        <view class="section">
          <text class="section-title">引言</text>
          <text class="section-text">
            欢迎使用我们的服务！我们高度重视您的隐私保护。本隐私协议说明了我们如何收集、使用、存储和保护您的个人信息。
          </text>
        </view>

        <!-- 信息收集 -->
        <view class="section">
          <text class="section-title">1. 信息收集</text>
          <text class="section-text">
            我们可能收集以下类型的个人信息：
            \n• 基本身份信息（姓名、联系方式）
            \n• 设备信息（设备型号、操作系统）
            \n• 使用数据（访问记录、操作日志）
          </text>
        </view>

        <!-- 信息使用 -->
        <view class="section">
          <text class="section-title">2. 信息使用</text>
          <text class="section-text">
            我们使用收集的信息用于：
            \n• 提供和改进我们的服务
            \n• 与您沟通重要通知
            \n• 保障账户和交易安全
          </text>
        </view>

        <!-- 信息共享 -->
        <view class="section">
          <text class="section-title">3. 信息共享</text>
          <text class="section-text">
            我们不会出售或出租您的个人信息给第三方。仅在以下情况下共享信息：
            \n• 获得您的明确同意
            \n• 遵守法律法规要求
            \n• 保护我们的合法权益
          </text>
        </view>

        <!-- 数据安全 -->
        <view class="section">
          <text class="section-title">4. 数据安全</text>
          <text class="section-text">
            我们采取合理的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。
          </text>
        </view>

        <!-- 用户权利 -->
        <view class="section">
          <text class="section-title">5. 您的权利</text>
          <text class="section-text">
            您有权：
            \n• 访问、更正或删除您的个人信息
            \n• 撤回已同意的隐私授权
            \n• 注销您的账户
          </text>
        </view>

        <!-- 联系我们 -->
        <view class="section">
          <text class="section-title">6. 联系我们</text>
          <text class="section-text">
            如对隐私协议有任何疑问，请联系我们：
            \n邮箱：privacy@example.com
            \n电话：400-123-4567
          </text>
        </view>

        <!-- 协议变更 -->
        <view class="section">
          <text class="section-title">7. 协议变更</text>
          <text class="section-text">
            我们可能适时更新本隐私协议。更新后会通过适当方式通知您，请定期查阅。
          </text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="footer">
      <button class="agree-btn" @click="handleAgree">同意并继续</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      updateTime: '2024年1月15日'
    }
  },
  methods: {
    // 同意协议
    handleAgree() {
      uni.showModal({
        title: '提示',
        content: '您已同意用户隐私协议',
        showCancel: false,
        success: () => {
           const eventChannel = this.getOpenerEventChannel();
		   eventChannel.emit('setCheck', {data: true});
          uni.navigateBack()
        }
      })
    }
  },
  onLoad() {
    // 页面加载时可以设置标题
    uni.setNavigationBarTitle({
      title: '隐私协议'
    })
  }
}
</script>

<style scoped>
.privacy-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f9fa;
}

/* 头部样式 */
.header {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eaeaea;
  text-align: center;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.update-time {
  font-size: 24rpx;
  color: #999;
}

/* 内容区域样式 */
.content-scroll {
  flex: 1;
  padding: 20rpx 30rpx;
}

.content {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.section-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: #555;
  white-space: pre-line;
}

/* 底部按钮样式 */
.footer {
  padding: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  gap: 20rpx;
}

.agree-btn {
  flex: 1;
  background-color: #007AFF;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
}

.disagree-btn {
  flex: 1;
  background-color: #f8f9fa;
  color: #666;
  border: 1rpx solid #eaeaea;
  border-radius: 12rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
}

/* 按钮点击效果 */
button:active {
  opacity: 0.8;
}
</style>